<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="../../vendors/iconfonts/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../../vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="shortcut icon" href="../../images/favicon.png">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>还款管理</title>
    <style type="text/css">
        ::-webkit-scrollbar {width: 6px; /*滚动条的宽度*/height: 10px; /*滚动条的高度*/}
        ::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
        ::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0);transition: background-color .3s;}
        ::-webkit-scrollbar-thumb:hover {width: 5px;background-color: rgba(200, 200, 200, 0.88);-webkit-border-radius: 5px;transition: background-color .3s;}
    </style>
</head>

<body>
<div class="content-wrapper">
    <div class="page-header">
        <h3 class="page-title">
            Forms
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Forms</a></li>
                <li class="breadcrumb-item active" aria-current="page">Basic elements</li>
            </ol>
        </nav>
    </div>
    <div id="app" class="row">
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                             @select="handleSelect">
                        <el-menu-item index="1">未结项</el-menu-item>
                        <el-menu-item index="2">已结项</el-menu-item>
                    </el-menu>
                    <br/><br/>
                    <el-form :inline="true" ref="search" :model="search" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="search.loanId" placeholder="借款编号" style="width:120px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="search.name" placeholder="姓名" style="width:120px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="search.phone" placeholder="手机号" style="width:180px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="search.contractNo" placeholder="合同号" style="width:130px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="onSubmit()">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="info" icon="el-icon-refresh" @click="handleReset()">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <br/>
                    <h4 class="card-title">贷款结项列表</h4>
                    <template>
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="loanId" label="借款编号" width="80" align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.userName" label="姓名" width="80" align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.contractId" label="合同号" width="90" align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.contractAmount" label="合同金额" width="80"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.borrowingPeriod" label="借款期限" width="80"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.loanType" label="贷款类型" width="90" align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.repaymentType" label="还款方式" width="90" align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.loanDate" label="放款时间" width="120" align="center">
                            </el-table-column>
                            <el-table-column prop="commonLoanInfo.borrowType" label="放款方式" width="90" align="center">
                            </el-table-column>
                            <el-table-column label="还款状态" width="90" align="center">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.commonLoanInfo.repaymentFinish===1" type="danger">还款中
                                    </el-tag>
                                    <el-tag v-else type="success">已还清</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="summaryDate" label="结项时间" width="120" align="center">
                            </el-table-column>
                            <el-table-column prop="summaryPoint" label="贷款评分" width="90" align="center">
                            </el-table-column>
                            <el-table-column prop="summaryDescription" label="风控结项评语" width="150" align="center">
                            </el-table-column>
                            <el-table-column v-if="showColumn === true" fixed="right" label="操作" width="120" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="onEdit(scope.row.loanId)" type="warning">结项办理
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <br/>
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pageSize"
                                       layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
                        </el-pagination>
                    </template>
                    <el-dialog title="办理结项" :visible.sync="dialogVisible1" width="40%">
                        <el-form ref="optionContain" :model="optionContain">
                            <el-form-item label="评分" >
                                <el-rate v-model="optionContain.thePoint"></el-rate>
                            </el-form-item>
                            <el-form-item label="结项评价">
                                <el-input type="textarea" :rows="4" placeholder="请输入内容" style="width: 320px"
                                          v-model="optionContain.theDescrip"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="commitFinish()">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="../../vendors/js/vendor.bundle.base.js"></script>
<script src="../../vendors/js/vendor.bundle.addons.js"></script>
<script src="../../js/off-canvas.js"></script>
<script src="../../js/misc.js"></script>
<script src="../../js/file-upload.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var settleM = new Vue({
        el: '#app',
        data: {
            activeIndex: '1',
            navselected: '',
            search: {
                loanId: '',
                name: '',
                phone: '',
                contractNo: '',
                finish: 0
            },
            commitInfo: {
                user: '',

            },
            showColumn: true,
            currentPage: 1, //初始页
            pageSize: 5,    //每页的数据
            totalSize: 0,
            tableData: [],
            dialogVisible1: false,
            optionContain: {
                thePoint: 5,
                theDescrip: '',
                theId: '',
            }
        },
        created() {
            this.fetchData()
        },
        methods: {
            fetchData() {
                var cp = String(this.currentPage);
                var ps = String(this.pageSize);
                var q = this.search;
                this.axiosMessage(cp, ps, q)
            },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                settleM.$data.currentPage = 1;
                settleM.$data.pageSize = size;
                this.fetchData()
            },
            handleCurrentChange: function (currentPage) {
                this.$data.currentPage = currentPage;
                this.fetchData()
            },
            onEdit(loanId) {
                settleM.$data.optionContain.thePoint = 5;
                settleM.$data.optionContain.theDescrip = '';
                settleM.$data.dialogVisible1 = true;
                settleM.$data.optionContain.theId = loanId
            },
            onSubmit() {
                settleM.$data.currentPage = 1;
                this.fetchData()
            },
            axiosMessage(cp, ps, q) {
                axios.post(('http://localhost:8004/loanSettlement/list/' + cp + '/' + ps), q).then(function (response) {
                    settleM.$data.tableData = response.data.rows;
                    settleM.$data.totalSize = response.data.total;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            handleSelect(index) {
                if(index === '1'){
                    settleM.$data.search.finish = 0;
                    settleM.$data.showColumn = true
                }else{
                    settleM.$data.search.finish = 1;
                    settleM.$data.showColumn = false
                }
                this.fetchData()
            },
            commitFinish() {
                axios.post(('http://localhost:8004/loanSettlement/commit/' + String(settleM.$data.optionContain.theId)), settleM.$data.optionContain).then(function (response) {
                    if (response.data === 1) {
                        settleM.$notify({
                            title: '成功',
                            message: '成功提交结项办理',
                            type: 'success'
                        });
                    }else{
                        settleM.$notify.error({
                            title: '错误',
                            message: '提交结项办理出现异常'
                        });
                    }
                }).catch(function (error) {
                    console.log(error);
                });
                settleM.$data.dialogVisible1 = false;
                this.onSubmit();
            },
            handleReset() {
                settleM.$data.search.loanId= '';
                settleM.$data.search.name= '';
                settleM.$data.search.phone= '';
                settleM.$data.search.contractNo= '';
                this.onSubmit();
            }
        }
    });
</script>

</html>